import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter1',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        primaryColor: Colors.black
      ),
      home: MyHomePage(title: '亚洲渔港商城'),
    );
  }
}

// 状态机
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

// 状态处理层pl
class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _onClick() {
    setState(() {
      _counter += 1;
    });
    print('点击了！');
  }

  void _onChange(String keyword) {
    print('$keyword');
  }

  @override
  Widget build(BuildContext context) {
    // 视图展示层
    return Scaffold(
      appBar: AppBar(
        // Text(widget.title, style: TextStyle(color: Color.fromRGBO(255, 255, 255, 1)),)
        title: Container(height: 30, child: Text(widget.title,),),
        centerTitle: true,
      ),
      body: Container(
        child: Column(children: <Widget>[
          Container(
            height: 44,
            color: Colors.blue,
            child: Center(child: Align(
              alignment: Alignment.centerLeft,
              child: Text(
                '最新动态',
                style: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),),
            padding: const EdgeInsets.fromLTRB(10, 0, 0, 0),
          ),
          // Placeholder(
          //   color: Colors.blue,
          //   fallbackHeight: 40,
          // ),
          Container(
            child: Image.network(
              'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583816728217&di=8914acc1dfd5bad98d59622124a4fd97&imgtype=0&src=http%3A%2F%2Fstatics.techuangyi.com%2Fuploadfile%2F2015%2F05%2F08%2F400x250_d1e23f22db9a511406ffb99d548c0f91.jpg',
              height: 200,
              fit: BoxFit.cover,
            ),
            decoration: BoxDecoration(
              // border: Border.fromBorderSide(
              //   BorderSide(
              //     color: Colors.blue,
              //     width: 1,
              //     style: BorderStyle.solid
              //   )
              // )
            ),
            width: 414,
            padding: EdgeInsets.fromLTRB(0, 10, 0, 0),
          ),
          TextField(
            onChanged: _onChange,
            decoration: InputDecoration(
              hintText: '产品名称',
              contentPadding: EdgeInsets.fromLTRB(10, 0, 0, 0),
            ),
          ),
          Expanded(
            child: Container(
              child: Align(
                alignment: Alignment.topLeft,
                child: Row(children: <Widget>[
                  Text('数量: '),
                  Expanded(
                    child: Text(
                      '$_counter',
                      style: TextStyle(
                        color: Colors.red,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ],),
              ),
              margin: const EdgeInsets.fromLTRB(0, 10, 0, 0),
              padding: const EdgeInsets.fromLTRB(10, 10, 0, 0),
              color: Colors.white
            ),
          )
        ],),
        // width: 414.0,
        margin: const EdgeInsets.fromLTRB(0, 0, 0, 0),
        padding: const EdgeInsets.fromLTRB(0, 0, 0, 0),
        color: Color.fromRGBO(244, 244, 244, 1),
      ),
      // floatingActionButton: FloatingActionButton(
      //   onPressed: _incrementCounter,
      //   tooltip: 'Increment',
      //   child: Icon(Icons.add),
      // ),
      bottomNavigationBar: Container(
        child: RaisedButton(
          onPressed: _onClick,
          child: Text('加入购物车', style: TextStyle(color: Colors.white, fontSize: 16)),
          color: Color.fromRGBO(62, 1106, 194, 1),
          padding: EdgeInsets.fromLTRB(0, 0, 0, 2),
        ), 
        height: 54,
        width: 255,
        // color: Color.fromRGBO(62, 1106, 194, 1),
        padding: EdgeInsets.fromLTRB(0, 0, 0, 10),
      ),
    );
  }
}
